<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        input {
            border: none;
        }

        ul {
            list-style-type: none;
        }

        .box {
            width: 50%;
            margin: 0 auto;
            text-align: center;
        }

        h1 {
            color: pink;
            font-weight: lighter;
            font-size: 50px;
            margin-bottom: 20px;
        }

        .box input {
            outline: none;
            border: 1px solid #ccc;
            box-shadow: 0 0 5px #ddd;
            width: 60%;
            line-height: 48px;
            padding: 0 35px;
            font-size: 18px;
        }

        .box div {
            position: relative;
        }

        .box div::before {
            position: absolute;
            content: "";
            width: 10px;
            height: 10px;
            top: 18px;
            left: 147px;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            transform: rotate(45deg);
        }

        .box ul {
            border: 1px solid #ccc;
            width: 60%;
            margin: 0 auto;
            border-top: none;
            border-bottom: none;
            box-shadow: 0 0 5px #ddd;
            display: none;
        }

        .box ul li {
            position: relative;
            border-bottom: 1px solid #ccc;
            height: 48px;
            line-height: 48px;
            text-align: left;
            padding-left: 35px;
        }

        .box li span {
            position: absolute;
            top: 0;
            right: 18px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        <h1>todos</h1>
        <div><input type="text" placeholder="请输入" required></div>
        <ul>
            <li>123<span>×</span>
            </li>
        </ul>
    </div>

    <script>
        var inputVal = document.getElementsByTagName('input')[0];
        var oUl = document.getElementsByTagName('ul')[0];

        inputVal.oninput = function () {
            var valStr = inputVal.value;
            let reg = new RegExp('(' + str + ")",'g');
            var oLi = document.getElementsByTagName('li');
            if (oLi && valStr.length) {
                for (let i = 0; i < oLi.length; i++) {
                    var str = oLi[i].textContent.trim()
                    str = str.slice(0, str.length - 1);
                    oUl.style.display = 'block';
                    if (!str.includes(valStr)) {
                        oLi[i].style.display = 'none'
                    } 
                }
                inputVal.onblur = function() {
                    oUl.style.display = 'none'
                }
            }
        }
        inputVal.onkeydown = function (e) {
                    e = e || window.event;
                    var oLi = document.getElementsByTagName('li');
                    if ((e.keyCode || e.which) === 13) {
                        oliDisplay(oLi)
                        var valStr = inputVal.value;
                        if(!valStr) {
                            alert("输入内容不能为空！")
                            return;
                        }
                        var newLi = document.createElement('li');
                        newLi.innerHTML = `${valStr}<span>×</span>`
                        oUl.style.display = 'block'
                        oUl.insertBefore(newLi, oUl.children[0]);
                        inputVal.value = '';
                        valStr = ''
                        var oSpan = document.getElementsByTagName('span');
                        for (let i = 0; i < oSpan.length; i++) {
                            oSpan[i].onclick = function () {
                                this.parentNode.remove()
                            }
                        }
                    }

                }

        function oliDisplay(Oli) {
            for(let i = 0;i < Oli.length;i++){
                Oli[i].style.display = 'block';
            }
        }
    </script>
</body>

</html>